<template>
  <view>
    <z-paging
      ref="paging"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无订单数据~"
      :empty-view-img-style="imgStyle"
    >
      <view slot="top">
        <u-navbar
          height="50"
          back-icon-color="#333"
          title="我的兑换"
          title-color="#333"
          title-size="36"
        >
        </u-navbar>
      </view>

      <view class="goods_area">
        <view class="goods_box" @click="routeTo" v-for="(item, index) in itemList" :key="index">
          <view class="goods-info">
            <text class="info-lef">交易单号GT98099495</text>
            <text class="info-rig" v-if="item.status">待发货</text>
            <text v-else class="info-rig">卖家已发货</text>
          </view>

          <view class="goods-list-box" @click="routeTo()">
            <view class="gods-img-box">
              <!-- <image class="goods-img" src="../../static/gui.png" mode=""></image> -->
            </view>
            <view class="goods-dsce">
              <view class="goods-title-tip">
                <text>商品名称商品名称</text>
              </view>
              <view class="goods-speci"> 规格：蓝色 30X20 </view>
              <view class="goods-price-info">
                <view class="goods-price-item">
                  <view class="goods_price">
                    <view class="">
                      <text class="price_main">1200积分</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="goods-floor" v-if="item.status == 0">
            <view class="floor-btn"> 查看物流 </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgStyle: {
        width: '12rem'
      },
      current: 0,
      scurrent: 0,
      tabsList: [
        {
          name: '商品'
        },
        {
          name: '视频'
        }
      ],
      itemList: [
        {
          status: 1
        },
        {
          status: 0
        }
      ],
      itemList2: [],
      order_id: ''
    }
  },
  methods: {
    routeTo() {
      uni.navigateTo({
        url: '/goods/group-goods-details/group-goods-details'
      })
    },
    queryList(page, pageSize) {
      this.initData(page, pageSize, '')
    },

    initData(page, pageSize, status) {
      //let self = this;
      // self.$u.api.getOrderList({
      // 	limit: pageSize,
      // 	page: page,
      // 	status: status
      // }).then(res => {
      // 	self.onOrderLoad(self.current, res.list, false);
      // }).catch(res => {
      // 	self.onOrderLoad(self.current, null, false);
      // });
      //this.onOrderLoad(this.current, this.itemList, false);
    },
    onOrderLoad(current, orderList, loading) {
      let self = this
      switch (Number(current)) {
        case 0:
          if (loading) {
            //self.$refs.paging.reload();
          } else {
            self.$refs.paging.complete(this.itemList)
          }
          break
        case 1:
          if (loading) {
            self.$refs.paging2.reload()
          } else {
            self.$refs.paging2.complete(this.itemList2)
          }
          break
        case 2:
          if (loading) {
            self.$refs.paging3.reload()
          } else {
            self.$refs.paging3.complete(orderList)
          }
          break
        case 3:
          if (loading) {
            self.$refs.paging4.reload()
          } else {
            self.$refs.paging4.complete(orderList)
          }
          break
        case 4:
          if (loading) {
            self.$refs.paging5.reload()
          } else {
            self.$refs.paging5.complete(orderList)
          }
          break
      }
    }
  }
}
</script>

<style>
page {
  background: #eeeeef;
}
.goods_area {
  padding: 20rpx;
}

.goods_box {
  background-color: #ffffff;
  padding: 15rpx;
  margin-bottom: 20rpx;
}

.goods-info {
  overflow: auto;
  height: 55rpx;
  border-bottom: #ededed 2rpx solid;
  margin-bottom: 10px;
  font-size: 30rpx;
}
.info-lef {
  float: left;
}
.info-rig {
  float: right;
  color: #999999;
}
.goods-list-box {
  display: flex;
  margin-bottom: 12rpx;
}

.goods-img-box {
  flex: 3;
  width: 210rpx;
  padding: 30rpx;
}
.goods-img {
  width: 200rpx;
  height: 200rpx;
}
.goods-dsce {
  flex: 7;
  display: flex;
  flex-direction: column;
  margin-left: 20rpx;
}
.goods-title-tip {
  flex: 7;
}

.goods-title-tip text {
  font-size: 33rpx;
}
.goods-price-item {
  float: left;
  margin-top: 60rpx;
}

.goods-price-info button {
  float: right;
  margin-right: 10rpx;
  font-size: 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 30rpx;
  background-color: #0f76bc;
  color: #ffffff;
  margin-top: 60rpx;
}

.goods_price {
  flex: 3;
  font-size: 25rpx;
  color: red;
  display: flex;
}
.price_tip {
  font-size: 20rpx;
}
.price_main {
  font-size: 35rpx;
}
.goods-floor {
  display: flex;
  flex-direction: row-reverse;
}
.floor-btn {
  display: inline-block;
  padding: 10rpx 20rpx;
  border: #999999 solid 2rpx;
  border-radius: 30rpx;
  margin: 10rpx;
}
</style>
